<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      roleName: "", //角色名称
      roleKey: "", //权限字符
      status: "", //状态
      createTime: [], //创建时间
      beginTime: "",
      endTime: "",

      //表格相关状态
      table: {
        data: [], //获取的角色列表数据
        loading: false,
      },
      //分页相关状态
      page: {
        pageNum: 1, //第几页
        pageSize: 10, //每页多少条
        total: 0, //总数据条数
      },
    };
  },
  methods: {
    //格式化时间
    formateTime() {
      console.log(this.createTime);
      this.beginTime = dayjs(this.createTime[0]).format("YYYY-MM-DD");
      this.endTime = dayjs(this.createTime[1]).format("YYYY-MM-DD");
      console.log(this.beginTime);
      console.log(this.endTime);
    },
    //获取数据
    async initData() {
      let {
        page: { pageNum, pageSize },
        roleName,
        roleKey,
        status,
        beginTime,
        endTime,
      } = this;
      console.log(this.beginTime);
      try {
        let { code, rows, total } = await this.$API.system.queryRoleList({
          pageNum,
          pageSize,
          roleName,
          roleKey,
          status,
          beginTime,
          endTime,
        });
        if (+code != 200) {
          rows = [];
          total = 0;
        }
        this.page.total = total;
        this.table.data = Object.freeze(rows);
        console.log(rows, code, total);
      } catch (error) {
        console.log(error);
      }
      //   this.table.loading=true;
    },
    selectionChange(selections) {
      console.log(selections);
    },
    changeStatus(status) {
      status = status === 1 ? 0 : 1;
    },
    reset() {
      this.roleName = "";
      this.roleKey = "";
      this.status = "";
      this.createTime = [];
      this.beginTime = "";
      this.endTime = "";
      this.initData()
    },
    //打开消息确认框
    openMessageBox(roleId, roleName, status) {
      console.log(status);
      let label = +status === 1 ? "停用" : "使用";
      console.log(label);
      console.log(roleName);
      this.$confirm(`确认要"${label}"${roleName}"角色吗？`, `系统提示`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.changeStatus(roleId, status);

        })
        .catch((error) => {
          console.log(error);
          this.$message({
            type: "info",
            message: "已取消角色状态修改",
          });
        });
    },
    //改变角色的状态
   async  changeStatus(roleId, status) {
      try {
        let { code, msg } = await this.$API.system.changeStatus(roleId, status);
        if (code !== 200) {
          this.$notify.error(msg);
          return
        }
        this.$message({
          type: "success",
          message: "改变角色状态成功!",
        });
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {
    this.initData();
  },
};
</script>

<template>
  <div class="template-box">
    <!-- 筛选/操作区域 -->
    <div class="filter-box">
      <div class="filter">
        <div class="form-item">
          <label class="first">角色名称</label>
          <el-input
            placeholder="请输入角色名称"
            v-model.trim="roleName"
            @keydown.native.enter="initData"
          />
        </div>
        <div class="form-item">
          <label>权限字符</label>
          <el-input
            placeholder="请输入权限字符"
            v-model.trim="roleKey"
            @keydown.native.enter="initData"
          />
        </div>
        <div class="form-item">
          <label>状态</label>
          <el-select
            v-model="status"
            placeholder="角色状态"
            @change="changeStatus"
          >
            <el-option value="0" label="正常" />
            <el-option value="1" label="停用"></el-option>
          </el-select>
        </div>
        <div class="form-item">
          <label>创建时间</label>
          <el-date-picker
            v-model="createTime"
            @change="formateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
      </div>
      <div class="handler">
        <el-button type="primary" icon="el-icon-search" @click.native="initData"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-box">
      <el-table :data="table.data" v-loading="table.loading" stripe border>
        <el-table-column type="selection" align="center" min-width="5%" />
        <el-table-column
          label="角色编号"
          prop="roleId"
          align="center"
          min-width="20%"
          show-overflow-tooltip
        />
        <el-table-column
          label="角色名称"
          prop="roleName"
          align="center"
          min-width="20%"
          show-overflow-tooltip
        />
        <el-table-column
          label="权限字符"
          prop="roleKey"
          align="center"
          min-width="20%"
        />
        <el-table-column
          label="显示顺序"
          prop="roleSort"
          align="center"
          min-width="15%"
        />
        <el-table-column label="状态" align="center" min-width="15%">
          <template v-slot="{ row: { roleId, roleName, status } }">
            <el-switch
              v-model="status"
              @change="openMessageBox(roleId, roleName, status)"
              active-color="#409EFF"
              inactive-color="#e0e0e0"
              active-value="0"
              inactive-value="1"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
          min-width="25%"
        />
        <el-table-column label="操作" align="center" min-width="" />

        <template #append>
          <el-pagination
            background
            layout="sizes, prev, pager, next"
            hide-on-single-page
            :total="page.total"
            :page-size.sync="page.pageSize"
            :current-page.sync="page.pageNum"
            @size-change="initData"
            @current-change="initData"
          >
          </el-pagination>
        </template>
      </el-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.filter-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 15px;
  padding-right: 0px;
  background: #fff;

  .filter {
    display: flex;

    .form-item {
      display: flex;
      align-items: center;

      height: 40px;
      label {
        // padding-right:20px;
        // width: auto;
        margin: 15px;
      }
      .first {
        margin-left: 0px;
      }

      .el-input {
        width: 150px;
      }

      .el-select {
        width: 150px;
      }
    }
  }

  .handler {
    margin-left: 30px;
    display: flex;

    .el-button {
      width: 60px;
      height: 25px;
      margin-right: 10px;
      padding: 10px;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 5%;
    }
  }
}

.table-box {
  padding-top: 30px;
}

/* ::deep(.cell){
    word-break: break-word;
    background-color: #f8f8f9;
    color: #515a6e;
    height: 40px;
    font-size: 50px;
}
 */
</style>
